<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定</title>
    <script>

    </script>
</head>
<body>
<div id="app">
    <!-- 分支结构
                    语法:
                        1.v-if   	 如果为真则展现标签
                        2.v-else-if  必须与v-if连用
                        3.v-else 	 必须与v-if连用	取反
                    案例:
                        要求: 按照用户的考试成绩 评级
                              >=90分  优秀
                              >=80分  良好
                              >=70分  中等
                              >=60分  及格
                              否则    不及格
                 -->

    <h3>评级</h3>
    请输入分数<input type="number" v-model="score"/>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score=80">良好</div>
    <div v-else-if="score=70">中等</div>
    <div v-else-if="score=60">及格</div>
    <div v-else>不及格</div>

</div>
<script src="../js/vue.js"></script>
<script>
    const APP = new Vue({
        el: "#app",
        data: {
            score: 50
        }
    })
</script>


</body>
</html>